{# 
  This page grabs project data from _data/docs/projects.yml. It looks up each
  project by its url (for example, it looks for /docs/extensions) and uses the
  project's own frontmatter to render the project title and summary.
#}

{% extends 'layouts/base.njk' %}

{% block title_bar %}
  {% include 'partials/breadcrumbs.njk' %}
{% endblock %}

{% block content %}
  <div class="stack gap-top-300 pad-left-400 pad-right-400">
    {% for key, value in i18n.projects -%}
      <h2 class="type--eyebrow color-secondary-text">{{ i18n.projects[key].heading }}</h2>
      <ul class="project-grid pad-0" role="list">
        {% for item in docs.projects[key] -%}
          {# Find the landing page for the project itself and grab its metadata #}
          {% set projectUrl = helpers.join(page.url, item.url) %}
          {% set project = helpers.findByUrl(collections.all, projectUrl) %}
          {# Don't render an empty link if a project is disabled via a build flag #}
          {% if project %}
            {% set pd = project.data %}
            <li class="text-align-center">
              <a class="project-card" href="{{ item.url }}/">
                {% from 'macros/project-icon.njk' import projectIcon with context %}
                {{ projectIcon(item.url) }}
                <h3 class="project-card__title type--h5 lg:gap-top-400">{{ pd.title }}</h1>
                {# TODO(samthor): We should probably limit this text. #}
                <p class="display-none lg:display-block type--small color-secondary-text gap-top-300">{{ pd.description }}</p>
              </a>
            </li>
          {% endif %}
        {%- endfor %}
      </ul>
    {%- endfor %}
  </div>
{% endblock %}